<template>
    <div>
       <ul class="mui-table-view">
                <li class="mui-table-view-cell mui-media"  v-for="item in newlist" :key="item.id">
					<!-- 注意这就是路由链接 ，这里要传id是因为每条新闻都有一个id，传到url中去方便后面获取对应-->
					<router-link :to="'/home/newsInfo/'+item.id">
						<img class="mui-media-object mui-pull-left" :src="item.img_url">
						<div class="mui-media-body">
							<h1>{{ item.title }}</h1>
							<p class='mui-ellipsis'>
								<!-- 下面的dataFormat中可以传参也可以不传参数，传就是指定什么样的格式 -->
                                <!-- <span>发表时间：{{ item.add_time | dataFormat('YYYY-MM-DD')}}</span> -->
								<span>发表时间：{{ item.add_time | dataFormat()}}</span>
                                <span>点击：{{item.click}}</span>
                            </p>
						</div>
					</router-link>
				</li>

			</ul>
    </div>
</template>
<script>
// 过程：
// 1、先把新闻资讯的基本结构拿过来（mui组件库里面的media-list.html），并且适当的修改一下样式
//2、用vue-resource来获取数据，并且把数据保存在newlist里面去
// 3、把数据渲染到结构里面（用v-for来遍历数组，并且一定要配合:key使用，在使用一些属性的时候记得要在属性前面加上属性绑定（：）），并且把其余的基本结构删掉
import { Toast } from 'mint-ui';
export default {
    data(){
		return {
			newlist:[]
		}
	},
	created(){
		this.getNewList()
	},
	methods:{
		getNewList(){
			this.$http.get('http://www.liulongbin.top:3005/api/getnewslist').then(result=>{
				
				if(result.body.status===0){
					console.log(result.body)
					this.newlist=result.body.message
				}else{
                    Toast('获取newlist失败');
				}
			})
		}
	}
}
</script>
<style scoped lang="scss">
  .mui-table-view{
    li{
        h1{
			font-size: 14px;

		}
		.mui-ellipsis{
			font-size: 12px;
			color: blue;
			// 下面是c3的布局
			display: flex;
			justify-content: space-between;//两边对齐
		}
    }
}
</style>